<ion-header>
  <ion-navbar text-center color="dark">
    <label style="color: white">创建新活动</label>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col class="left-col" col-4>
        活动名称
      </ion-col>
      <ion-col class="right-col" col-8>
        <ion-input type="text" placeholder="活动名称" maxlength="20"></ion-input>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="left-col" col-4>
        目的地
      </ion-col>
      <ion-col class="right-col" col-8>
        <button class="addCircle" (click)="addDestination()" ion-button icon-only clear>
          <ion-icon name="add-circle"></ion-icon>
        </button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="left-col" col-4>
        途经地
      </ion-col>
      <ion-col class="right-col" col-8>
        <button class="addCircle" ion-button icon-only clear>
          <ion-icon name="add-circle"></ion-icon>
        </button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="left-col" col-4>
        预计到达时间
      </ion-col>
      <ion-col class="right-col" col-8>
        <ion-datetime displayFormat="YYYY/MM/DD HH:mm" pickerFormat="YYYY MM DD HH mm" cancelText="取消" doneText="完成" placeholder="选择时间"></ion-datetime>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="left-col" col-4>
        活动图
      </ion-col>
      <ion-col col-8 style="height: 100px;padding-top: 0;">
        <ion-img style="width: 200px;height: 100px;margin-left: 1rem;"></ion-img>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>


